今天是鐵人賽 Day8，目標是建立 React 前端專案，並整合 Tailwind CSS，讓我們可以用簡單的 class 快速做出漂亮的 UI。這是前端開發的第一步，接下來會串接後端 API 來顯示商品資料。

1️⃣ 建立 React 專案
使用 Vite 快速建立專案：

npm create vite@latest frontend
cd frontend
npm install

專案建立後，我們就可以進行前端開發了。

2️⃣ 安裝 Tailwind CSS
安裝 Tailwind 與相關套件：
npm install -D tailwindcss postcss autoprefixer
初始化 Tailwind 設定檔：
npx tailwindcss init -p
在 tailwind.config.js 中設定掃描路徑：
content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"]
在 src/index.css 引入 Tailwind 指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

在 main.jsx 引入 index.css：
import './index.css';
3️⃣ 測試 Tailwind CSS 是否生效
在 App.jsx 或 main.jsx 加入測試文字：

<h1 className="text-3xl font-bold text-blue-600">
  Hello Tailwind!
</h1>

啟動開發伺服器：
npm run dev
打開瀏覽器，看到藍色大字「Hello Tailwind!」就代表成功

🐛 遇到的問題
Tailwind CSS 無法正常啟動
一開始執行 npx tailwindcss init -p 會跳出 npm error could not determine executable to run
原因是 版本衝突 或 Windows PowerShell 的 PATH 設定
解法：確認 Node 與 npm 版本，刪除 node_modules + package-lock.json，重新安裝，再用 .bin 路徑執行 tailwind（例如：.\node_modules.bin\tailwindcss.cmd init -p）

沒有看到 tailwindcss.cmd
原因：安裝過程可能中斷或依賴版本不一致
解法：確定 package.json 裡有 "tailwindcss"，然後完整執行 npm install

版本問題卡超久
React / Vite / Tailwind 的相容性要搭配正確版本
建議在建立專案前先查官方文件，避免最新套件衝突

💡 Day8 收穫

• 成功建立 React 專案，整合 Tailwind CSS
• 測試 Tailwind CSS 生效，確認前端樣式可用
• 開始前端開發流程（Component → CSS → Dev Server → 瀏覽器顯示）
• 對 Vite + React + Tailwind 的工作流程有初步了解
• 學到遇到版本或環境問題時的排錯流程